import React, { Component } from 'react'
import { Form, Input, InputNumber, Button } from 'antd';
import { connect } from "react-redux";
import { removeEmptyField } from '../../compoent/emptyFild'

class CreateUser extends Component {


    onFinish = (values) => {
        values.page = 1
        values.size = 10

        if (values) {
            const newValues = removeEmptyField(values)
            this.props.add(newValues).then(res => {
                //
                this.props.userList({ page: 1, size: 10 })
            })
            this.props.handleCancel()
        }

    };

    onFinishFailed = (errorInfo) => {

    };


    render() {
        return (
            <div style={{ width: '100%', height: '100%' }}>
                <Form
                    name="CreateUser"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 13 }}
                    initialValues={{}}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="用户昵称："
                        name="nickName"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="用户密码："
                        name="password"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input.Password minLength='6' />
                    </Form.Item>
                    <Form.Item
                        label="手机号："
                        name="mobile"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input type='tel' maxLength='11' minLength='11' />
                    </Form.Item>

                    <Form.Item
                        label="备注："
                        name="remarks"
                    // rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input.TextArea />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="reset" >
                            重置
                        </Button>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 30 }}>
                            提交
                        </Button>

                    </Form.Item>
                </Form>
            </div>
        )
    }
}

const mapState = state => ({
    ...state.users

});

const mapDispatch = dispatch => ({
    ...dispatch.users
})

export default connect(mapState, mapDispatch)(CreateUser);